body{
   background-color:  #f0f0f0;
}
.viewPort {
    width: 100%;
    background-color: #f0f0f0;
    padding-top: 63px;
   //  顶部搜索区
    .top_search {
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       padding: 10px 15px;
       background-color: #fff;
       box-sizing: border-box;
       display: flex;

       input {
          flex: 1;
          height: 35px;
          border: 1px solid rgb(114, 114, 248);
          border-radius: 20px;
          padding-left: 15px;
       }
    }
   //  渐变导航栏
    .jianbian{
      width: 100%;
      height: 177px;
      display: flex;
      border-radius: 10px;
      padding: 0 10px;
      box-sizing: border-box;
      ul{
         flex: 1;
         text-align: center;
         &:first-child{
            li{
               background: #fff5f1;
               &:first-child{
                  background-image: linear-gradient(180deg, #FA5956 0%, #FB8650 100%);
                  border-radius: 7px 0 0 0;
               }
               &:last-child{
                  border-radius:  0 0 0 7px;
               }
            }
         }
         &:nth-child(2){
            li{
               background: #eff9ff;
               &:first-child{
                  background-image: linear-gradient(180deg, #3C83FA 0%, #50B2FA 100%);
               }
            }
         }
         &:nth-child(3){
            li{
               background: #ecfcf8;
               &:first-child{
                  background-image: linear-gradient(180deg, #66A4FF 0%, #5E80FF 100%);
               }
            }
         }
         &:nth-child(4){
            li{
               background: #f2f5ff;
               &:first-child{
                  background-image: linear-gradient(180deg, #2FC3B6 0%, #52D9B3 100%);
               }
            }
         }
       
         &:nth-child(5){
            li{
               background: #fff9f2;
               &:first-child{
                  background-image: linear-gradient(180deg, #FFA846 0%, #FF8939 100%);
                  border-radius: 0 7px 0 0;
               }
               &:last-child{
                  border-radius:  0 0 7px 0 ;
               }
            }
         }
         li{
            height: 58px;
            padding-top: 10px;
            box-sizing: border-box;
            border: 1px solid #e5e2e2;
            &:first-child{
              a{
               color: #fff;
            }
            }
            a{
               display: block;
               font-size: 10px;
               color: #000;
            }
         }
      }
      img{
            width: 28px;
            height: 28px;
   }

   }
   // 特价直播区
   .zhibo{
      display: flex;
      height: 153px;
      padding: 0 10px;
      box-sizing: border-box;
      margin-top: 10px;
      .one{
         height: 153px;
         background-color: #ffffff;
         flex:1;
         border-radius: 8px;
         padding: 6px 4px;
         box-sizing: border-box;
         p{
            font-size: 19px;
            font-weight: 700;
            color: red;
         }
         img{
            width: 100%;
            height: 84px;
            margin-top: 7px;
            border-radius: 5px;
            flex: 1;
         }
         .tejia{
            font-size: 11px;
            color: red;
            span{
               background-color: #ffebe3;
               padding: 2px 0;
               float: right;
            }
            img{
               width: 73px;
               height: 20px;
               float: left;
            }
         }
         &:last-child{
            margin-left: 5px;
         }
         .lia{
            width: 100%;
            height: 84px;
            display: flex;
            justify-content:space-around;
            margin-bottom: 6px;
         }
      }
   }
   .banner{
      width: 100%;
      padding:0 10px;
      box-sizing: border-box;
      padding-top: 10px;
      img{
         width: 100%;
         height: 74px;
         border-radius: 7px;

      }
   }
   .dianhua{
      width: 100%;
      display: flex;
      padding-top: 10px;
      justify-content:space-around;
      .yuding{
         height: 32px;
         width: 100px;
         border: 1px solid #ccc;
         text-align: center;
         line-height: 32px;
      }
   }
   .diannao{
      padding-bottom: 80px;
      margin-top: 10px;
      text-align: center;
      a{
         font-size: 13px;
         &:first-child{
            &::after{
               content: "";
               display: inline-block;
               width: 3px;
               height: 10px;
               border: 1 solid #d0d0d0;
               background-color: #3e3d3d;
               margin: 0 20px;
            }
         }
      }
      p{
         margin-top: 8px;
         font-size: 13px;
      }
   }
   // 底部固定定位菜单栏
   .footer{
      display: flex;
      width: 100%;
      height: 50px;
      background-color: #fff;
      position: fixed;
      left: 0;
      bottom: 0;
      padding-bottom:5px ;
      a{
         justify-content: center;
         align-items: center ;
         text-align: center; 
         display: block;
         flex: 1;
         text-align: center;
      }
      .bg{
         width: 36px;
         height: 30px;
         background: url(../img/tabbar.png) no-repeat ;
         background-position: 2px 0;
         background-size: 32px auto;
         margin: 0 auto;
      }
      .bg2{
         width: 36px;
         height: 30px;
         background: url(../img/tabbar.png) no-repeat ;
         background-position: 2px -32px;
         background-size: 32px auto;
         margin: 0 auto;
      }
      .bg3{
         width: 36px;
         height: 30px;
         background: url(../img/tabbar.png) no-repeat ;
         background-position: 2px -64px;
         background-size: 32px auto;
         margin: 0 auto;
      }
      .bg4{
         width: 36px;
         height: 30px;
         background: url(../img/tabbar.png) no-repeat ;
         background-position: 2px -95px;
         background-size: 32px auto;
         margin: 0 auto;
      }
   }
}

@media only screen and (min-width: 1024px){
   .viewPort{
      width: 700px;
      margin: 0 auto;
      .top_search{
         width:700px;
         left: 50%;
         margin-left: -350px;
      }
      .diannao{
         padding-bottom: 180px;
      }
      .footer{
         width: 700px;
         left: 50%;
         margin-left: -350px;
      }
      .banner{
         img{
            width: 100%;
            height: 169px;
            border-radius: 7px;
   
         }
      }
   }

}